<template>
  <div >
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/admin/role/list' }">角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="search">
      <el-input placeholder="请输入内容" v-model="kw" >
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        <el-button slot="append"  @click="reset" >重置</el-button>
      </el-input>
      <el-button type="success" @click="addRole">添加</el-button>
    </div>

    <div class="user-list">

      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="#"
          width="50">
        </el-table-column>
        <el-table-column
          prop="name"
          label="英文名称"
          width="220">
        </el-table-column>
        <el-table-column
          prop="display_name"
          label="中文名称"
          width="260">
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          width="300">

        </el-table-column>
        <el-table-column
          prop="created_at"
          label="创建时间"
          width="170">
        </el-table-column>
        <el-table-column
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button @click="delRole(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle @click="editRole(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="[15, 30, 50, 70]"
        :page-size="15"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    name: "RoleList",
    data(){
      return {
        tableData:[],
        page:1,
        per_page:15,
        total:0,
        current_page:0,
        form:{},
        kw:'',
      }
    },
    created() {
      this.getRoles();
    },
    methods:{
      getRoles(){
        this.axios.get('/api/admin/role',{
          params:{page:this.page,per_page:this.per_page}
        }).then(res=>{
          this.tableData = res.data.data.data;
          this.current_page = res.data.data.current_page;
          this.per_page = res.data.data.per_page;
          this.total = res.data.data.total
        }).catch(err=>{
          this.$message.error(err.response.data.status)
        })
      },
      handleSizeChange(val) {
        this.per_page = val;
        this.getRoles();
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getRoles();
      },
      editRole(row){
        this.$router.push(`/admin/role/edit/${row.id}`)
      },
      delRole(row){
        this.$confirm('你确认要做此操作吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.delete(`/api/admin/role/${row.id}`).then(res=>{
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            //TODO::优化，可以把当明tableData里对应的记录删除，省去刷新列表，多一次网络请求
            this.getRoles();
          }).catch(err=>{
            this.$message.error(err.response.data.message)
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });


        });
      },
      search(){
        if(this.kw === ''){
          this.$message.error('请输入搜索关键词')
          return ;
        }

        this.axios.post('/api/admin/role/search',{
          kw:this.kw,
          per_page:this.per_page
        }).then(res=>{
          this.tableData = res.data.data.data;
          this.current_page = res.data.data.current_page;
          this.per_page = res.data.data.per_page;
          this.total = res.data.data.total
        }).catch(err=>{
          this.$message.error(err.response.data.message)
        })
      },
      reset(){
        this.kw = '';
        this.getRoles();
      },
      addRole(){
        this.$router.push('/admin/role/add')
      }
    }
  }
</script>

<style scoped lang="less">
  .search{
    margin: 10px 0;
    .el-input-group{
      width: 47%;
    }
  }
  .page{
    margin-top: 5px;
  }
</style>
